<template>
  <div class="date-calculator-tool">
    <div class="tool-header">
      <h1>日期计算器</h1>
      <p>计算日期差值和日期运算工具</p>
    </div>

    <div class="tool-container">
      <el-row :gutter="20">
        <!-- 计算器主体 -->
        <el-col :span="16">
          <div class="calculator-section">
            <!-- 日期差值计算 -->
            <div class="calculation-type">
              <h3>日期差值计算</h3>
              <div class="date-inputs">
                <div class="input-group">
                  <label>开始日期：</label>
                  <el-date-picker
                    v-model="startDate"
                    type="date"
                    placeholder="选择开始日期"
                    size="large"
                    @change="calculateDifference"
                  />
                </div>
                <div class="input-group">
                  <label>结束日期：</label>
                  <el-date-picker
                    v-model="endDate"
                    type="date"
                    placeholder="选择结束日期"
                    size="large"
                    @change="calculateDifference"
                  />
                </div>
              </div>
              
              <div class="result-display" v-if="differenceResult">
                <h4>计算结果：</h4>
                <div class="result-grid">
                  <div class="result-item">
                    <div class="result-value">{{ differenceResult.totalDays }}</div>
                    <div class="result-label">总天数</div>
                  </div>
                  <div class="result-item">
                    <div class="result-value">{{ differenceResult.weeks }}</div>
                    <div class="result-label">周数</div>
                  </div>
                  <div class="result-item">
                    <div class="result-value">{{ differenceResult.months }}</div>
                    <div class="result-label">月数</div>
                  </div>
                  <div class="result-item">
                    <div class="result-value">{{ differenceResult.years }}</div>
                    <div class="result-label">年数</div>
                  </div>
                </div>
                <div class="detailed-result">
                  <p><strong>详细结果：</strong>{{ differenceResult.detailed }}</p>
                </div>
              </div>
            </div>
            
            <!-- 日期运算 -->
            <div class="calculation-type">
              <h3>日期运算</h3>
              <div class="date-operation">
                <div class="operation-inputs">
                  <div class="input-group">
                    <label>基准日期：</label>
                    <el-date-picker
                      v-model="baseDate"
                      type="date"
                      placeholder="选择基准日期"
                      size="large"
                      @change="calculateOperation"
                    />
                  </div>
                  <div class="operation-controls">
                    <el-radio-group v-model="operationType" @change="calculateOperation">
                      <el-radio label="add">加上</el-radio>
                      <el-radio label="subtract">减去</el-radio>
                    </el-radio-group>
                    <div class="time-inputs">
                      <el-input-number
                        v-model="operationYears"
                        :min="0"
                        :max="1000"
                        controls-position="right"
                        placeholder="年"
                        @change="calculateOperation"
                      />
                      <el-input-number
                        v-model="operationMonths"
                        :min="0"
                        :max="11"
                        controls-position="right"
                        placeholder="月"
                        @change="calculateOperation"
                      />
                      <el-input-number
                        v-model="operationDays"
                        :min="0"
                        :max="365"
                        controls-position="right"
                        placeholder="天"
                        @change="calculateOperation"
                      />
                    </div>
                  </div>
                </div>
                
                <div class="result-display" v-if="operationResult">
                  <h4>计算结果：</h4>
                  <div class="operation-result">
                    <div class="result-date">{{ operationResult.formattedDate }}</div>
                    <div class="result-info">{{ operationResult.info }}</div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 工作日计算 -->
            <div class="calculation-type">
              <h3>工作日计算</h3>
              <div class="workday-calculation">
                <div class="input-group">
                  <label>开始日期：</label>
                  <el-date-picker
                    v-model="workdayStartDate"
                    type="date"
                    placeholder="选择开始日期"
                    size="large"
                    @change="calculateWorkdays"
                  />
                </div>
                <div class="input-group">
                  <label>工作日天数：</label>
                  <el-input-number
                    v-model="workdayCount"
                    :min="1"
                    :max="1000"
                    controls-position="right"
                    placeholder="输入工作日天数"
                    @change="calculateWorkdays"
                  />
                </div>
                
                <div class="result-display" v-if="workdayResult">
                  <h4>计算结果：</h4>
                  <div class="workday-result">
                    <div class="result-date">{{ workdayResult.endDate }}</div>
                    <div class="result-info">{{ workdayResult.info }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 工具和说明 -->
        <el-col :span="8">
          <div class="tools-section">
            <div class="section-header">
              <h3>快捷工具</h3>
            </div>
            
            <div class="quick-tools">
              <el-button @click="setToday" type="primary" size="large" style="width: 100%; margin-bottom: 10px;">
                设为今天
              </el-button>
              <el-button @click="setTomorrow" size="large" style="width: 100%; margin-bottom: 10px;">
                设为明天
              </el-button>
              <el-button @click="setYesterday" size="large" style="width: 100%; margin-bottom: 10px;">
                设为昨天
              </el-button>
              <el-button @click="clearAll" size="large" style="width: 100%; margin-bottom: 10px;">
                清空所有
              </el-button>
            </div>
          </div>
          
          <div class="help-section">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>使用说明</span>
                </div>
              </template>
              
              <div class="help-content">
                <h4>功能说明：</h4>
                <ul>
                  <li><strong>日期差值：</strong> 计算两个日期之间的时间差</li>
                  <li><strong>日期运算：</strong> 在指定日期基础上加减时间</li>
                  <li><strong>工作日计算：</strong> 计算指定工作日数后的日期</li>
                </ul>
                
                <h4>计算规则：</h4>
                <ul>
                  <li>日期差值按实际天数计算</li>
                  <li>月份计算考虑每月天数差异</li>
                  <li>闰年会自动处理</li>
                  <li>工作日计算排除周末</li>
                </ul>
                
                <h4>注意事项：</h4>
                <div class="warning">
                  <p>⚠️ 日期运算结果可能因月份天数不同而有所差异</p>
                  <p>⚠️ 工作日计算默认排除周六和周日</p>
                  <p>⚠️ 节假日不在工作日计算范围内</p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const startDate = ref('')
const endDate = ref('')
const baseDate = ref('')
const operationType = ref('add')
const operationYears = ref(0)
const operationMonths = ref(0)
const operationDays = ref(0)
const workdayStartDate = ref('')
const workdayCount = ref(1)

const differenceResult = ref(null)
const operationResult = ref(null)
const workdayResult = ref(null)

const calculateDifference = () => {
  if (!startDate.value || !endDate.value) return
  
  const start = new Date(startDate.value)
  const end = new Date(endDate.value)
  
  if (start > end) {
    ElMessage.warning('开始日期不能晚于结束日期')
    return
  }
  
  const diffTime = Math.abs(end - start)
  const totalDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  
  const years = Math.floor(totalDays / 365)
  const months = Math.floor((totalDays % 365) / 30)
  const weeks = Math.floor(totalDays / 7)
  const days = totalDays % 7
  
  differenceResult.value = {
    totalDays,
    weeks,
    months,
    years,
    detailed: `${years}年${months}个月${days}天`
  }
}

const calculateOperation = () => {
  if (!baseDate.value) return
  
  const base = new Date(baseDate.value)
  const result = new Date(base)
  
  if (operationType.value === 'add') {
    result.setFullYear(result.getFullYear() + operationYears.value)
    result.setMonth(result.getMonth() + operationMonths.value)
    result.setDate(result.getDate() + operationDays.value)
  } else {
    result.setFullYear(result.getFullYear() - operationYears.value)
    result.setMonth(result.getMonth() - operationMonths.value)
    result.setDate(result.getDate() - operationDays.value)
  }
  
  const operationText = operationType.value === 'add' ? '加上' : '减去'
  const info = `${operationText} ${operationYears.value}年${operationMonths.value}个月${operationDays.value}天`
  
  operationResult.value = {
    formattedDate: result.toLocaleDateString('zh-CN'),
    info: info
  }
}

const calculateWorkdays = () => {
  if (!workdayStartDate.value || !workdayCount.value) return
  
  const start = new Date(workdayStartDate.value)
  let current = new Date(start)
  let workdays = 0
  
  while (workdays < workdayCount.value) {
    current.setDate(current.getDate() + 1)
    const dayOfWeek = current.getDay()
    // 排除周末 (0=周日, 6=周六)
    if (dayOfWeek !== 0 && dayOfWeek !== 6) {
      workdays++
    }
  }
  
  workdayResult.value = {
    endDate: current.toLocaleDateString('zh-CN'),
    info: `从${start.toLocaleDateString('zh-CN')}开始，经过${workdayCount.value}个工作日`
  }
}

const setToday = () => {
  const today = new Date()
  startDate.value = today
  endDate.value = today
  baseDate.value = today
  workdayStartDate.value = today
  ElMessage.success('已设置为今天')
}

const setTomorrow = () => {
  const tomorrow = new Date()
  tomorrow.setDate(tomorrow.getDate() + 1)
  endDate.value = tomorrow
  baseDate.value = tomorrow
  workdayStartDate.value = tomorrow
  ElMessage.success('已设置为明天')
}

const setYesterday = () => {
  const yesterday = new Date()
  yesterday.setDate(yesterday.getDate() - 1)
  startDate.value = yesterday
  baseDate.value = yesterday
  workdayStartDate.value = yesterday
  ElMessage.success('已设置为昨天')
}

const clearAll = () => {
  startDate.value = ''
  endDate.value = ''
  baseDate.value = ''
  operationYears.value = 0
  operationMonths.value = 0
  operationDays.value = 0
  workdayStartDate.value = ''
  workdayCount.value = 1
  differenceResult.value = null
  operationResult.value = null
  workdayResult.value = null
  ElMessage.success('已清空所有数据')
}
</script>

<style scoped>
.date-calculator-tool {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tool-header {
  text-align: center;
  margin-bottom: 40px;
}

.tool-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
}

.tool-header p {
  color: #666;
  font-size: 1.1rem;
}

.tool-container {
  margin-bottom: 40px;
}

.calculator-section,
.tools-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  height: 100%;
}

.calculation-type {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e9ecef;
}

.calculation-type:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.calculation-type h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.date-inputs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.input-group {
  flex: 1;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #666;
}

.result-display {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.result-display h4 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.result-item {
  text-align: center;
  background: white;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.result-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 5px;
}

.result-label {
  font-size: 0.9rem;
  color: #666;
}

.detailed-result {
  text-align: center;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.detailed-result p {
  margin: 0;
  color: #333;
}

.date-operation {
  margin-bottom: 20px;
}

.operation-inputs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.operation-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.time-inputs {
  display: flex;
  gap: 10px;
}

.time-inputs .el-input-number {
  flex: 1;
}

.operation-result {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.result-date {
  font-size: 1.5rem;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 10px;
}

.result-info {
  color: #666;
  font-size: 1rem;
}

.workday-calculation {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.workday-result {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.section-header {
  margin-bottom: 20px;
}

.section-header h3 {
  color: #333;
  margin: 0;
  font-size: 1.3rem;
}

.quick-tools {
  margin-bottom: 30px;
}

.help-section {
  margin-top: 20px;
}

.card-header {
  font-weight: bold;
  color: #333;
}

.help-content h4 {
  color: #333;
  margin: 20px 0 10px 0;
  font-size: 1.1rem;
}

.help-content ul {
  color: #666;
  padding-left: 20px;
  margin-bottom: 15px;
}

.help-content li {
  margin-bottom: 5px;
}

.warning {
  background: #fff3cd;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
  margin: 15px 0;
}

.warning p {
  margin: 5px 0;
  color: #856404;
}

@media (max-width: 768px) {
  .tool-header h1 {
    font-size: 2rem;
  }
  
  .date-inputs {
    flex-direction: column;
  }
  
  .result-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .time-inputs {
    flex-direction: column;
  }
  
  .operation-controls {
    align-items: stretch;
  }
}
</style>
